<template>
    <el-dialog
        class="dialog"
        :destroy-on-close="true"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="门禁组名称" prop="group_name">
                <el-input
                    v-model="formData.group_name"
                    placeholder="请输入门禁组名称"
                    maxlength="20"
                ></el-input>
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
                <el-input
                    type="textarea"
                    placeholder="请输入备注"
                    v-model="formData.remark"
                    clearable
                    resize="none"
                    maxlength="200"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    name: "equipmentDoorGroupEdit",
    mixins: [mixinDialogForm]
})
export default class equipmentDoorGroupEdit extends Vue {
    @Action("equipmentDoorGroup/add") itemAdd: any;
    @Action("equipmentDoorGroup/edit") itemEdit: any;
    editInit(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
    }

    formData: any = {
        group_name: "",
        remark: ""
    };
    // 表单验证
    rules: any = {
        group_name: [
            {
                required: true,
                message: "请输入门禁组名称"
            }
        ]
    };
    // 获取全部
    @Action('equipmentDoorGroup/all') getGroup: any;
    successAfter() {
        // 刷新列表
        this.getGroup(true);
    }
    // 标题
    get title() {
        return (this as any).isEdit ? "编辑门禁组" : "新增门禁组";
    }
}
</script>
